﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>管理中心</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/admin/css/icon/iconfont.css">
    <link rel="stylesheet" href="~/admin/css/default/style.css">
</head>

<body class="indexbody">
    <el-container id="main" class="main-container" v-cloak>
        <el-aside class="main-left" :width="asideMenuWidth">
            <div v-if="!isCollapse" class="logo"></div>
            <div v-else="isCollapse" class="logo mini"></div>
            <div class="menu-container">
                <transition name="el-fade-in-linear">
                    <dt-menu :mini="isCollapse" :list-data="listData" class="sidebar-nav"></dt-menu>
                </transition>
            </div>
        </el-aside>

        <el-container>
            <el-header height="50px" class="main-top">
                <div class="head-nav">
                    <div class="head-nav-left">
                        <a href="#" @@click.prevent="toggleMenu">
                            <i :class="topMenuIcon"></i>
                        </a>
                    </div>
                    <ul class="head-nav-right">
                        <li>
                            <div class="avatar">
                                <img :src="loadImage(adminInfo.avatar)" v-if="adminInfo.avatar"/>
                                <i class="el-icon-user-solid" v-else></i>
                            </div>
                            <h3>{{adminInfo.userName}}</h3>
                        </li>
                        <li>
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <i class="el-icon-more"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown" class="menu-dropdown">
                                    <el-dropdown-item>
                                        <el-link :underline="false" icon="el-icon-cloudy" :href="config.webUrl" target="_blank">
                                            预览网站
                                        </el-link>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-link :underline="false" icon="el-icon-house" href="home/center" target="mainframe">
                                            管理中心
                                        </el-link>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-link :underline="false" icon="el-icon-lock" href="manager/password" target="mainframe">
                                            修改密码
                                        </el-link>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-link :underline="false" icon="el-icon-switch-button" @@click="handleLogout">
                                            注销登录
                                        </el-link>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </li>
                    </ul>

                </div>
            </el-header>
            <el-main class="main-right">
                <iframe id="mainframe" name="mainframe" frameborder="0" src="/admin/home/center"></iframe>
            </el-main>
        </el-container>
    </el-container>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/admin/js/axios.config.js"></script>
    <script src="~/admin/js/menu.component.js"></script>
    <script>
	//初始化VUE
        var vm = new Vue({
            el: '#main',
            data: {
                isCollapse: false,
                topMenuIcon: 'el-icon-s-fold',
                asideMenuWidth: '220px',
                config: [],//系统设置
                adminInfo: [],
                listData: []
            },
            destroyed: function () {
                window.onresize = null; //注销window.onresize事件
            },
            methods: {
                //加载图片地址
                loadImage: function (src) {
                    return baseApi + src
                },
                initData: function () {
                    let _this = this;
                    //加载菜单数据
                    AxiosAjax({
                        url: '/admin/navigation',
                        loading: true,
                        success: function (res) {
                            _this.listData = res.data;
                            //console.log(_this.listData);
                        }
                    });
                    //加载管理员信息
                    AxiosAjax({
                        method: 'get',
                        url: '/admin/info',
                        success: function (res) {
                            _this.adminInfo = res.data;
                        }
                    });
                    //加载站点信息
                    AxiosAjax({
                        url: '/client/setting/sysconfig',
                        success: function (res) {
                            _this.config = res.data;
                        }
                    });
                },
                mainPageInit: function () {
                    if (this.isCollapse) {
                        this.asideMenuWidth = '52px'
                        this.topMenuIcon = 'el-icon-s-unfold'
                    } else {
                        this.asideMenuWidth = '220px'
                        this.topMenuIcon = 'el-icon-s-fold'
                    }
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    this.mainPageInit(); //重新渲染页面
                },
                handleOpen: function (key, keyPath) {
                    //console.log(key, keyPath);
                },
                handleClose: function (key, keyPath) {
                    //console.log(key, keyPath);
                },
                handleLogout: function () {
                    window.localStorage.removeItem('dt_access_token');
                    window.localStorage.removeItem('dt_refresh_token');
                    window.location.href = '/admin/login';
                }
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>